import React, { Component } from 'react';
import { Text, Image, View, TouchableOpacity, ScrollView } from 'react-native';
import { unitWidth, width } from '../constants/AdapterUtil';
import { MyHeader } from '../components/MyHeader';
import Colors from '../constants/Colors';
import { postFetch } from '../constants/HttpExtension';
import { show } from '../constants/Toast';
import { api_member_info_Certification, api_order_workorder_offerDetail, api_order_workorder_cooperation } from '../constants/HttpServices';
import { SubmitButton1, SubmitButton4 } from '../components/Button';
import { MyInput1 } from '../components/Input';
import TextUtil from '../constants/TextUtil';
import { ExamineView } from '../components/EmptyView';
import { HideItem, TextItem, ComponentItem, QuoteItem, SettingItem } from '../components/Item';
import { CommonModal, CommonModal2, CommonModal3 } from '../components/Modal';

export default class QuoteDetailScreen extends Component {

    constructor(props) {
        super(props)

        const { navigation } = this.props;
        this.id = navigation.getParam('id', 0)
        this.type = navigation.getParam('type', 0)//是否服务商 0=否，1=是
        this.state = {
            list: [],
            info: {}
        }
    }

    componentDidMount() {
        this.getData();
        this.props.navigation.addListener('didFocus', payload => {
        })
    }

    componentWillUnmount() {

    };

    render() {

        let views = []
        for (let i = 0, len = this.state.list.length; i < len; i++) {
            let item = this.state.list[i];
            views.push(
                <View style={{ height: 40 * unitWidth, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
                    <Text style={{ color: Colors.black, fontSize: 15 }}>{i + 1}.{item.title}</Text>
                    <Text style={{ color: Colors.black, fontSize: 15 }}>￥{item.price}</Text>
                </View>
            );
        }

        return (
            <View style={{ flex: 1, backgroundColor: Colors.colorEF }}>
                <MyHeader title='报价详情' leftImg={require('../res/ic_arrow_left.png')} leftClick={() => { this.props.navigation.pop() }} />
                <ScrollView style={{ flex: 1 }} showsVerticalScrollIndicator={false}>
                    <View>
                        <SettingItem
                            title={'服务商：' + this.state.info.merchname}
                            onPress={() => {
                                this.props.navigation.navigate('ServiceProviderDetail', { merchid: this.state.info.merchid })
                            }}
                            isLast={true} />
                        <View style={{
                            width: width, paddingHorizontal: 20 * unitWidth,
                            backgroundColor: Colors.white, alignItems: 'flex-start', paddingTop: 15 * unitWidth
                        }}>
                            <Text style={{ color: Colors.black, fontSize: 15 }}>零部件清单：</Text>
                            <View style={{
                                width: 335 * unitWidth, backgroundColor: Colors.colorEF,
                                borderRadius: 10, marginTop: 10 * unitWidth, paddingHorizontal: 12 * unitWidth
                            }}>
                                {views}
                            </View>
                            <View style={{ alignSelf: 'stretch', height: 40 * unitWidth, backgroundColor: Colors.white, flexDirection: 'row', alignItems: 'center', justifyContent: 'flex-end' }}>
                                <Text style={{ fontSize: 15, color: Colors.colorOrange }}>合计：<Text style={{ fontSize: 20 }}>￥{this.state.info.total_price}</Text></Text>
                            </View>
                            <View style={{ backgroundColor: Colors.colorEF, width: width, alignSelf: 'center', height: 0.5, marginTop: 10 * unitWidth, position: 'absolute', bottom: 0 }} />
                        </View>
                        <TextItem title='交货日期：' value={this.state.info.delivery_date} isLast={false} />
                        <TextItem title='补充说明：' value={this.state.info.remark} isLast={true} />
                    </View>
                </ScrollView>
                {this.type == 0 ?
                    <View style={{ position: 'absolute', bottom: 0, height: 50 * unitWidth, backgroundColor: Colors.white, width: width, justifyContent: 'center' }}>
                        <SubmitButton4 style={{ alignSelf: 'center' }} text='与TA合作' onPress={() => {
                            this.submit()
                        }} />
                    </View> : null}
                <CommonModal3 ref='CommonModal' title={'恭喜你确认成功\n请耐心等待服务商确认哦'} btnText='确定'
                    onPress={() => {
                        this.refs.CommonModal.hideModal();
                        this.props.navigation.pop();
                    }}
                    onClosePress={() => {
                        this.props.navigation.pop();
                    }}
                />
            </View>
        );
    }

    getData() {
        let params = {
            'id': this.id,
        }
        postFetch(api_order_workorder_offerDetail, params, {
            success: (response) => {
                this.setState({
                    info: response.result,
                    list: response.result.element_list
                })
            },
            fail: (response) => {
                show(response.result.message);
            }
        })
    }

    submit() {
        let params = {
            'id': this.state.info.id,
        }
        postFetch(api_order_workorder_cooperation, params, {
            success: (response) => {
                this.refs.CommonModal.showModal();
            },
            fail: (response) => {
                // show(response.result.message);
                show('无效')
            }
        })
    }
}